<template>
  <div class="divBox">
    <el-card :bordered="false" dis-hover>
      <el-tabs v-model="tableFrom.type" @tab-click="onChangeType">
        <el-tab-pane :label="$t('throughtrainflowpackage')" name="copy" />
        <!-- <el-tab-pane label="$t('electronicfacesheetprinting')" name="mer_dump" /> -->
      </el-tabs>
      <el-row>
        <el-col :span="24" class="record_count">
          <el-button type="primary" plain @click="getPurchase">{{
            $t("purchaserecord")
          }}</el-button>
        </el-col>
      </el-row>
    </el-card>
    <!--购买记录-->
    <el-dialog
      v-if="dialogVisible"
      :title="
        tableFrom.type == 'copy'
          ? $t('commoditycollectiod')
          : $t('electronicfaceorcord')
      "
      :visible.sync="dialogVisible"
      width="700px"
    >
      <el-table :data="tableData" :loading="loading" class="mt25">
        <el-table-column :label="$t('serialno')" min-width="50">
          <template slot-scope="scope">
            <span>{{
              scope.$index + (purchaseForm.page - 1) * purchaseForm.limit + 1
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="order_id"
          :label="$t('ordernumber')"
          min-width="120"
        />
        <el-table-column :label="$t('purchaserecord')" min-width="90">
          <template slot-scope="scope">
            <span v-if="scope.row.order_info"
              >${{ scope.row.order_info.price }}
              {{ scope.row.order_info.name }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="create_time"
          :label="$t('purchasetime')"
          min-width="90"
        />
      </el-table>
      <div class="block">
        <el-pagination
          :page-sizes="[20, 40, 60, 80]"
          :page-size="purchaseForm.limit"
          :current-page="purchaseForm.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChangeOther"
          @current-change="pageChangeOther"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import { productCopyRecordApi } from "@/api/product";
import { payRecordLst } from "@/api/setting";
export default {
  name: "TableList",
  props: {
    copy: {
      type: Object,
      default: null,
    },
    dump: {
      type: Object,
      default: null,
    },
    accountInfo: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      isChecked: "copy",
      tableFrom: {
        page: 1,
        limit: 20,
        type: "copy",
      },
      total: 0,
      loading: false,
      tableList: [],
      modals: false,
      dialogVisible: false,
      tableData: [],
      purchaseForm: {
        page: 1,
        limit: 10,
      },
    };
  },
  watch: {},
  created() {
    this.getRecordList();
  },
  mounted() {},
  methods: {
    onChangeType() {
      this.getRecordList();
    },
    // 其他列表
    getRecordList() {
      this.loading = true;
      productCopyRecordApi(this.tableFrom)
        .then(async (res) => {
          const data = res.data;
          this.tableList = data.list;
          this.total = res.data.count;
          this.loading = false;
        })
        .catch((res) => {
          this.loading = false;
          this.$message.error(res.message);
        });
    },
    handleSizeChange(val) {
      this.tableFrom.limit = val;
      this.getRecordList("");
    },
    handleSizeChangeOther(val) {
      this.purchaseForm.limit = val;
      this.getPurchase();
    },
    pageChange(index) {
      this.tableFrom.page = index;
      this.getRecordList();
    },
    pageChangeOther(index) {
      this.purchaseForm.page = index;
      this.getPurchase();
    },
    // 购买记录
    getPurchase() {
      this.dialogVisible = true;
      this.purchaseForm.type = this.tableFrom.type == "copy" ? 1 : 2;
      payRecordLst(this.purchaseForm)
        .then(async (res) => {
          const data = res.data;
          this.tableData = data.list;
          this.total = res.data.count;
          this.loading = false;
        })
        .catch((res) => {
          this.loading = false;
          this.$message.error(res.message);
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.mt25 {
  margin-top: 25px;
}
.record_count {
  text-align: right;
}
</style>
